{layout name="layout/header" /}
<link href="root/css/plugins/footable/footable.core.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->
<link href="root/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>权限列表</h5>
                    <div class="ibox-tools">
                        <button type="button" class="btn btn-primary btn-sm refresh">刷新</button>
                        <a type="button" class="btn btn-success btn-sm" href="{:url('add_node')}">新添</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6">
                            <div id="treeview"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>
<!-- Bootstrap-Treeview plugin javascript -->
<script src="root/js/plugins/treeview/bootstrap-treeview.js"></script>
<script>
    $(document).ready(function() {
        var elem = document.querySelectorAll('.js-switch');
        elem.forEach(function(i,index){
            var a= "a" +index;
            a = new Switchery(i, {
            color: '#1AB394'
            });
        });
        var data = {$data};

        $('#treeview').treeview({
            levels: 3,
            color: "#428bca",
            expandIcon: 'glyphicon glyphicon-chevron-right',
            collapseIcon: 'glyphicon glyphicon-chevron-down',
            data: data,
            showTags: true
        });
        $('#treeview').on('nodeSelected', function(event, data) {
            var url = "{:url('rbac/update_node')}"+'?id='+data.id;

            layer.confirm('请选择对此条数据进行的操作',{
                btn: ['编辑','删除','取消'],
                yes: function(index, layero){
                    window.location.href=url;
                },
                btn2: function(index, layero){
                    layer.confirm('确定删除吗?',{
                        btn: ['确定','取消'],
                        yes:function () {
                            $.ajax({
                                url:"{:url('rbac/access_ajax_del_node')}",
                                type:"post",
                                data:{id:data.id},
                                dataType:"json",
                                success:function (res) {
                                    layer.msg(res.msg);
                                    if(res.code ==1){
                                        console.log(data.nodeId)
                                        $('#treeview').treeview('disableNode', [ data.nodeId, { silent: true } ]);
                                    }
                                }
                            })
                        },
                        btn2:function () {
                        }
                    })
                },
                btn3: function(index, layero){
                    layer.closeAll();
                }
            });

        });
    });

</script>
